<!--页头组件-->
<template>
  <div>
    <div id="header">
      <!-- 左侧，包括院徽和学院名 -->
      <div id="imageall">
        <!-- 院徽 -->
        <div id="image">
          <img src="../assets/学院院徽透明.png" width="104px" height="100px"/>
        </div>
        <!-- 学院名 -->
        <div id="name">
          <div>
          <span style="font-size: 45px; font-family: STXingkai; color: rgb(255,255,255);"
          >河北大学</span
          >
          <span style="font-size: 30px; font-family: STXingkai;color: #fff;"
          >网络空间安全与计算机学院/计算机教学部</span
          >
          </div>
          <div>
          <span style="font-size: 20px; color: #fff; font-family: 'Microsoft YaHei';">
  School of Cyber Security and Computer / Department of Computer Teaching
</span>

          </div>
        </div>
      </div>
      <!-- 搜索块 -->
      <div class="search">
        <el-input
          style="width: 190px"
          placeholder="请输入内容"
          v-model="input"
          clearable
        ></el-input>
        &nbsp;
        <el-button
          size="medium"
          type="primary"
          icon="el-icon-search"
          style="width: 80px; height: 40px; background-color: #fff;color: black;"
          @click="search"
        >搜索
        </el-button
        >
      </div>
      <!-- 校历图标 -->
      <div class="calendar-container">
        <div class="calendar">
          <img
            src="../assets/week.png"
            @mouseenter="showCalendar"
            @mouseleave="hideCalendar"
          />
        </div>
        <img
          v-show="showingCalendar"
          src="../assets/三角.png"
          class="triangle"
        />
      </div>
    </div>
    <div class="calendar-popup-container">
      <div v-show="showingCalendar" class="calendar-popup">
        <SchoolCalendar></SchoolCalendar>
      </div>
    </div>
  </div>
</template>

<script>
import SchoolCalendar from "@/components/SchoolCalendar.vue";

export default {
  components: {SchoolCalendar},
  data() {
    return {
      input: "",
      showingCalendar: false,
    };
  },
  methods: {
    search() {
      this.$router.push({path: '/search', query: {key: this.input}});
    },
    showCalendar() {
      this.showingCalendar = true;
    },
    hideCalendar() {
      this.showingCalendar = false;
    },
  },
};
</script>

<style scoped>
#header {
  height: 150px;
  display: flex;
  background-color: #2b547e;
}

.calendar {
  padding-top: 50px;
  padding-left: 40px;
  padding-right: 20px;
}

#image {
  float: left;
  padding: 25px 0;
}

#name {
  float: left;
  margin-top: 12px;
  height: 50%;
  width: 80%;
  padding: 25px 3px;
  display: flex;
  flex-direction: column;

}

.search {
  float: left;
  width: 20%;
  padding-left: 5%;
  padding-top: 55px;
  min-width: 300px;


}

#imageall {
  width: 1000px;
  float: left;
  margin-left: 20px;
  height: 150px;
  min-width: 500px;

}

.calendar-popup-container {
  position: relative;
}

.calendar-popup {
  position: absolute;
  left: 80%;
  right: 10px;
  opacity: 80%;
  background-color: black;
  z-index: 1001;
}

.triangle {
  margin-left: 50px;
}
</style>
